<template>
    <basic-container>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-setting"></i> 送货服务记录管理</el-breadcrumb-item>
                <el-breadcrumb-item><i class="el-icon-date"></i> 新增送货服务记录</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <avue-form ref="form" v-model="form" :option="option" @reset-change="emptyChange" @submit="submit">
            <template slot-scope="scope" slot="customerSn">
                <select-customer-form
                        :customerObj="{customerName: form.customerName, customerSn: form.customerSn}"
                        @changeCustomer="handleSelectCustomer"></select-customer-form>
            </template>

            <template slot-scope="scope" slot="linkmanId">
                <el-select v-model="form.linkmanId"
                           filterable
                           remote
                           :remote-method="remoteMethod"
                           :loading="loading"
                           placeholder="请先选择客户">
                    <el-option
                            v-for="item in linkmanList"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </template>
            <template slot-scope="scope" slot="goodsTags">
                <el-select
                        class="fill-width"
                        v-model="form.goodsTags"
                        multiple
                        allow-create
                        filterable
                        placeholder="请填写标签"></el-select>
            </template>
            <template slot-scope="scope" slot="otherServices">
                <el-select
                        class="fill-width"
                        v-model="form.otherServices"
                        multiple
                        allow-create
                        filterable
                        placeholder="请填写标签"></el-select>
            </template>
        </avue-form>
    </basic-container>
</template>

<script>
    import {fetchList as fetchLinkmanList} from '@/api/crm/customerlinkman' //联系人
    import {formOption} from '@/const/crud/crm/form_option/homedeliveryrecord';
    import selectCustomerForm from '@/components/crm/select_customer_form';
    import {addObj} from '@/api/crm/homedeliveryrecord';


    export default {
        data() {
            return {
                form: {},
                option: formOption,
                linkmanList: [],
                loading: false,
            }
        },
        components: {
            selectCustomerForm,
        },
        // computed: {
        // },
        mounted() {
            this.remoteMethod('');
        },
        created() {
        },
        methods: {
            async handleSelectCustomer(customerObj) {
                if (this.form.customerSn === customerObj.customerSn) return;
                this.$set(this.form, 'customerSn', customerObj.customerSn);
                this.$set(this.form, 'customerName', customerObj.customerName);
                this.remoteMethod('');
            },
            async remoteMethod(query) {
                if (this.form.customerSn) {
                    this.loading = true;
                    let params = {
                        customerSn: this.form.customerSn,
                        name: query
                    };
                    await fetchLinkmanList(params).then(response => {
                        this.linkmanList = response.data.data.records;
                        this.loading = false;
                    }).catch(() => {
                        this.loading = false;
                    });
                } else {
                    this.linkmanList = [];
                }
                // 处理回显linkmanId
                if (this.form.linkmanId) {
                    let flag = true;
                    for (let i = 0, len = this.linkmanList.length; i < len; i++) {
                        if (this.linkmanList[i].id === this.form.linkmanId) {
                            flag = false;
                            break;
                        }
                    }
                    if (flag) {
                        this.form.linkmanId = '';
                    }
                }
            },
            emptyChange() {
                this.form = {};
            },
            submit() {
                let goodsTags = this.form.goodsTags;
                goodsTags = (Array.isArray(goodsTags) && goodsTags.length > 0) ? goodsTags.join(',') : "";
                if (goodsTags.length > 64) {
                    this.$message.warning("配送物品标签太长,不大于50字符");
                }
                let otherServices = this.form.otherServices;
                otherServices = (Array.isArray(otherServices) && otherServices.length > 0) ? otherServices.join(',') : "";
                if (goodsTags.length > 64) {
                    this.$message.warning("其他服务标签太长,不大于50字符");
                }
                let params = {
                    goodsTags: goodsTags,
                    otherServices: otherServices
                };
                addObj(Object.assign({}, this.form, params)).then(response => {
                    if (response.data.code === 0) {
                        this.$message.success('添加成功')
                        let that = this;
                        setTimeout(function () {
                            that.$store.commit('DEL_ONE_TAG', that.$route);
                            that.$router.go(-1);
                        }, 2000);
                    } else {
                        this.$message.success(response.data.msg)
                    }
                })
            },
        }
    }
</script>

<style scoped lang="scss">
    .crumbs {
        margin: 20px 10px;
    }
</style>


